/*
 * @Descripttion:
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-09-01 14:01:17
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-04-08 14:04:42
 */
import Vue from 'vue'
const v = new Vue()
import echarts from 'echarts'
// import '../../../../static/js/echarts/echarts.js'

import router from '../../../router'
/**
 * @description:项目分类
 */
export const drawFemaleRatio = (id, dataList) => {
  let sexChart = echarts.init(document.getElementById(id))
  sexChart.setOption({
    color: ['#26BBFF', '#ffea62', '#53FFAC', '#3F7EEF', '#AA72FF'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 14,
        start: 0,
        end: 50,
        xAxisIndex: [0],
        textStyle: {
          color: '#fff',
          fontSize: '10',
        },
      },
    ],
    legend: {
      orient: 'right',
      right: 10,
      data: [
        {
          name: '政府投资',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '国企项目',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '非政府投资',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '政府与社会共筹',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '其他工程项目',
          textStyle: {
            color: '#fff',
          },
        },
      ],
    },
    xAxis: [
      {
        scale: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        data: dataList.nameArray, //内容
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'center',
          fontSize: 10,
          padding: [0, 40, 0, 0],
        },
      },
      {
        axisLabel: {
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '政府投资',
        type: 'bar',
        yAxisIndex: 1,
        data: dataList.firstNumArray,
      },
      {
        name: '国企项目',
        type: 'bar',
        yAxisIndex: 1,
        data: dataList.sixthNumArray,
      },
      {
        name: '非政府投资',
        type: 'bar',
        data: dataList.secondNumArray,
      },
      {
        name: '政府与社会共筹',
        type: 'bar',
        data: dataList.fourthNumArray,
      },
      {
        name: '其他工程项目',
        type: 'bar',
        data: dataList.fivthNumArray,
      },
    ],
  })
  window.addEventListener('resize', () => {
    sexChart.resize()
  })
}

/**
 * @description:保证金缴纳
 */
export const drawOperatingRatio = (id, type, dataList) => {
  let doubleBarChart = echarts.init(document.getElementById(id))
  doubleBarChart.setOption({
    color: ['#6defff', '#ff78f5'],
    toolbox: { show: false },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 14,
        start: 0,
        end: 50,
        xAxisIndex: [0],
        textStyle: {
          color: '#fff',
          fontSize: '10',
        },
      },
    ],
    legend: {
      top: 20,
      data: ['项目总数', '金额总数'],
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      top: 80,
      left: '3%',
      right: '4%',
      bottom: '12%',
      containLabel: true,
    },
    xAxis: [
      {
        scale: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        data: dataList.nameArray, //内容
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        name: '单位(个)',
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'left',
          fontSize: 10,
          padding: [0, 10, 0, 0],
        },
      },
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        name: '金额(万元)',
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'center',
          fontSize: 10,
          padding: [0, 10, 0, 0],
        },
      },
    ],
    series: [
      {
        name: '项目总数',
        type: 'bar',
        yAxisIndex: 0,
        barWidth: 15, //柱图宽度
        data: dataList.firstNumArray, //内容
      },
      {
        name: '金额总数',
        type: 'line',
        symbol: 'circle',
        yAxisIndex: 1,
        smooth: type == 1 ? true : false,
        label: {
          show: true,
          position: 'inside',
          color: '#ff78f5',
          formatter: (params) => {
            return `${params.value}`
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255,120,245,0.8)',
              },
              {
                offset: 0.34,
                color: 'rgba(255,120,245,0.45)',
              },
              {
                offset: 1,
                color: 'rgba(255,120,245,0.20)',
              },
            ]),
          },
        },
        data: dataList.thirdNumArray, //内容
      },
    ],
  })
  window.addEventListener('resize', () => {
    doubleBarChart.resize()
  })
}

/**
 * @description:工资发放趋势
 */
export const drawLineArea = (id, type, dataList) => {
  let doubleBarChart = echarts.init(document.getElementById(id))
  doubleBarChart.setOption({
    color: ['#6defff', '#ff78f5'],
    toolbox: { show: false },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      data: ['项目总数', '工资总数'],
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        scale: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        data: dataList.nameArray, //内容
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        name: '项目总数(个)',
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'left',
          fontSize: 10,
          padding: [0, 40, 0, 0],
        },
      },
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        name: '工资总数(万元)',
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'center',
          fontSize: 10,
          padding: [0, 40, 0, 0],
        },
      },
    ],
    series: [
      {
        name: '项目总数',
        type: 'bar',
        yAxisIndex: 0,
        barWidth: 15, //柱图宽度
        data: dataList.firstNumArray,
      },
      {
        name: '工资总数',
        type: 'line',
        symbol: 'circle',
        yAxisIndex: 1,
        smooth: type == 1 ? true : false,
        label: {
          show: true,
          position: 'inside',
          color: '#ff78f5',
          formatter: (params) => {
            return `${params.value}`
          },
        },
        areaStyle: {
          normal: {
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255,120,245,0.8)',
              },
              {
                offset: 0.34,
                color: 'rgba(255,120,245,0.45)',
              },
              {
                offset: 1,
                color: 'rgba(255,120,245,0.20)',
              },
            ]),
          },
        },
        data: dataList.thirdNumArray,
      },
    ],
  })
  window.addEventListener('resize', () => {
    doubleBarChart.resize()
  })
}
/**
 * @description:预警
 */
export const drawTipCenter = (id, dataList) => {
  let sexChart = echarts.init(document.getElementById(id))
  sexChart.setOption({
    color: ['#26BBFF', '#53FFAC', '#3F7EEF', '#AA72FF'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 14,
        start: 0,
        end: 50,
        xAxisIndex: [0],
        textStyle: {
          color: '#fff',
          fontSize: '10',
        },
      },
    ],
    legend: {
      orient: 'right',
      right: 10,
      data: [
        {
          name: '未开设专户预警',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '童工预警',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '考勤预警',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '工资拖欠预警',
          textStyle: {
            color: '#fff',
          },
        },
      ],
    },
    xAxis: [
      {
        scale: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        data: dataList.nameArray, //内容
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        nameLocation: 'end',
        nameGap: 22,
        nameTextStyle: {
          align: 'center',
          fontSize: 10,
          padding: [0, 40, 0, 0],
        },
      },
      {
        axisLabel: {
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '未开设专户预警',
        type: 'bar',
        // yAxisIndex: 1,
        data: dataList.firstNumArray,
      },
      {
        name: '童工预警',
        type: 'bar',
        data: dataList.secondNumArray,
      },
      {
        name: '考勤预警',
        type: 'bar',
        // yAxisIndex: 1,
        data: dataList.fourthNumArray,
      },
      {
        name: '工资拖欠预警',
        type: 'bar',
        data: dataList.fivthNumArray,
      },
    ],
  })
  window.addEventListener('resize', () => {
    sexChart.resize()
  })
}

/**
 * @description:专户比例
 */
export const drawIntegrityManagement = (id, dataList) => {
  let sexChart = echarts.init(document.getElementById(id))
  sexChart.setOption({
    color: ['#26BBFF', '#ffea62', '#53FFAC', '#3F7EEF', '#AA72FF'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 14,
        start: 0,
        end: 50,
        xAxisIndex: [0],
        textStyle: {
          color: '#fff',
          fontSize: '10',
        },
      },
    ],
    grid: {
      top: 80,
      left: '3%',
      right: '4%',
      bottom: '12%',
      containLabel: true,
    },
    legend: {
      orient: 'right',
      right: 10,
      data: [
        {
          name: '政府投资',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '国企项目',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '非政府投资',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '政府与社会共筹',
          textStyle: {
            color: '#fff',
          },
        },
        {
          name: '其他工程项目',
          textStyle: {
            color: '#fff',
          },
        },
      ],
    },
    xAxis: [
      {
        scale: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        data: dataList.nameArray, //内容
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        name: '比例（%）',
        nameLocation: 'end',
        // nameGap: 22,
        nameTextStyle: {
          align: 'left',
          fontSize: 10,
          padding: [0, 40, 0, 0],
        },
      },
      {
        axisLabel: {
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '政府投资',
        type: 'bar',
        data: dataList.firstNumArray,
      },
      {
        name: '国企项目',
        type: 'bar',
        yAxisIndex: 1,
        data: dataList.sixthNumArray,
      },
      {
        name: '非政府投资',
        type: 'bar',
        data: dataList.secondNumArray,
      },
      {
        name: '政府与社会共筹',
        type: 'bar',
        yAxisIndex: 1,
        data: dataList.fourthNumArray,
      },
      {
        name: '其他工程项目',
        type: 'bar',
        data: dataList.fivthNumArray,
      },
    ],
  })
  window.addEventListener('resize', () => {
    sexChart.resize()
  })
}
